(function(window) {
	'use strict';

	// 存储列表元素
	const itemsStorage = {
		ITEMS_KEY : 'items' ,

		// 获取元素
		fetch() {
			const item = JSON.parse(localStorage.getItem(this.ITEMS_KEY))

			return item == null?
					[]:
					item;
		},
		// 保存
		save(data) {
			localStorage.setItem(this.ITEMS_KEY, JSON.stringify(data))
		}
	};

	// 下面超链接导航的选项
	const A_STATUS_ENUM = {
		ALL : "", ACTIVE : 'active', COMPLETED : 'completed'
	}
	// 注册全局指令
	Vue.directive('app-focus', {
		inserted (el, binding) {
			// 聚焦元素
			el.focus()
		}
	})
	// 将超链接转换为a_enum
	function find_A_STATUS_ENUM_ByAStr(a_status_str) {
		return Object.values(A_STATUS_ENUM)
						.find(item => item === a_status_str)
	}
	// 监听超链接变化
	window.onhashchange = function() {
		// 获取当前链接的hash_url值, 屏蔽掉前面的 #/
		const hash_url = window.location.hash.substr(2)

		const a_status = find_A_STATUS_ENUM_ByAStr(hash_url);
		
		if (a_status || a_status === "") {
			vm.a_status = a_status;
		}
	}
	

	var vm = new Vue({
		el: '.todoapp',
		data() {
			return {
				hello: 'hello',
				items: itemsStorage.fetch(),
				current_item: null,
				a_status: A_STATUS_ENUM.ALL,
				A_STATUS_ENUM
			}
		},
		directives: {
			// 更新焦点指令
			'item-focus': {
				update (el, binding) {
					if (binding.value) {
						el.focus()
					}
				}
			}
		},
		computed: {
			// 未完成任务的数量
			item_amount_not_completed() {
				return this.$_item_not_completed.length;
			},
			// 未完成的任务
			$_item_not_completed() {
				return this.items.filter(element => !element.completed);
			},
			// 是否展示列表内容
			is_show() {
				return this.items.length !== 0;
			},
			// 全部选择
			toggle_all: {
				// 主动点击全选按钮
				set() {
					// console.log('set...');
					// 如果全部完成, 把全部变为false
					if (this.item_amount_not_completed === 0) {
						this.items.forEach(item => item.completed = false);
					} else {
						// 如果有部分 未完成, 则将全部变为 已完成
						this.$_item_not_completed.forEach(item => item.completed = true)
					}
				},
				// 被动获取其他元素改变的状态, 从而双向绑定修改原本的状态
				get() {
					// console.log('get...');
					return this.item_amount_not_completed === 0;
				}
			},
			// 被过滤的元素
			filtered_items: {
				get() {
					const status_deal_dict = {
						[this.A_STATUS_ENUM.ALL]: item => true,
						[this.A_STATUS_ENUM.ACTIVE]: item => !item.completed,
						[this.A_STATUS_ENUM.COMPLETED]: item => item.completed
					}

					const filter_condition = status_deal_dict[this.a_status];

					if (filter_condition) {
						console.log('this.items :', this.items);
						return this.items.filter(filter_condition);
					}
					
					return null;
				}
			}
		},
		watch: {
			// 监听深度变化, 有变化则保存
			items: {
				deep: true,
				handler(newVal, oldVal) {
					itemsStorage.save(newVal)
				},	
			}
		},
		methods: {
			// 增加新元素
			add_item(e) {
				if (e.target.value.trim() === "") {
					return ;
				}

				this.items.push({
					id: this.$_idGenerator(),
					content: e.target.value,
					completed: false
				});

				e.target.value = "";
			},
			clearCompleted() {
				this.items = this.items.filter(item => !item.completed)
			},
			removeItem(itemIndex) {
				this.items.splice(itemIndex, 1);
			},
			editingItem(item) {
				this.current_item = item;
			},
			cancelEdit() {
				this.current_item = null;
			},
			// 保存通过输入框修改的值
			saveEdit(e, itemIndex) {
				// 如果是空则返回
				if (this.current_item == null) {
					return ;
				}
				// 如果去除空格后为 '' 空白字符串，则从元素列表中 去除当前元素
				if (e.target.value.trim() === '') {
					this.removeItem(itemIndex);
					return ;
				}
				// 将元素的内容 赋值为 输入框的内容
				this.current_item.content = e.target.value;
				// 取消编辑状态
				this.cancelEdit();
			},
			// 生成元素的id
			$_idGenerator() {
				return this.items.length !== 0?
						Number(this.items[this.items.length - 1].id) + 1:
						0;
			}
		}
	});
})(window);
